<template>
  <!-- 研学项目 -->
  <div class="project">
    <!-- 按钮 -->
    <div class="btns">
      <el-row>
        <el-col :span="20">
          <el-form :inline="true" size="small">
            <el-form-item>
              <el-input v-model="param.region" clearable placeholder="输入地区" @input='inputChange'></el-input>
            </el-form-item>
            <el-form-item>
              <el-select v-model="param.status" clearable placeholder="状态" @change="inputChange">
                <el-option
                    v-for="item in options"
                    :key="item"
                    :label="item"
                    :value="item">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-input v-model="param.name" clearable placeholder="输入项目名称" @input='inputChange'></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="4" style="text-align:right">
          <el-button type="primary" size="small" @click="toSaveHandler">项 目 申 请</el-button>
        </el-col>
      </el-row>
    </div>
    <!-- 按钮 -->
    <!-- 表格 -->
    <el-table size="small" :data="projectData.list" v-loading="loading" @row-click="toDetails">
      <el-table-column label="项目封面" width="150">
        <template slot-scope="scope">
          <img :src="scope.row.figure" alt="" style="width:100%">
        </template>
      </el-table-column>
      <el-table-column label="项目信息" >
        <template slot-scope="scope">
          <div class="prop">
            <span class="prop_name">项目名称</span>
            <span>{{scope.row.name}}</span>
          </div>
          <div class="prop">
            <span class="prop_name">所属区域</span>
            <span>{{scope.row.region}}</span>
          </div>
          <div class="prop">
            <span class="prop_name">起止时间</span>
            <span>{{scope.row.beginTime |fmtDate}} ~ {{scope.row.endTime |fmtDate}}</span>
          </div>
          <div class="prop">
            <span class="prop_name">带队导师</span>
            <span>{{scope.row.teacher && scope.row.teacher.realname}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态"  width="100">
        <template v-slot="scope">
          <el-tag size="mini" v-if="scope.row.status ==='审核不通过'" type="danger">{{scope.row.status}}</el-tag>
          <el-tag size="mini" v-else-if="scope.row.status ==='审核中'" type="info" >{{scope.row.status}}</el-tag>
          <el-tag size="mini" v-else >{{scope.row.status}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="mini" @click.stop="toDeleteHandler(scope.row)">删除</el-button>
          <el-button type="text" size="mini" @click.stop="toEditHandler(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格 -->
    <!-- 分页 -->
    <el-pagination background layout="prev, pager, next" small
      :hide-on-single-page="true"
      :total="projectData.total"
      :page-size="projectData.pageSize"
      :current-page="projectData.page"
      @current-change="currentChangeHandler">
    </el-pagination>
    <!-- 分页 -->
    <!-- 模态框 -->
    <el-dialog :title="title" :visible.sync="visible" width="80%" @close="clearValidate" class="customer_modal">
      <div>
        <el-form :model="form" ref="projectForm" size="small" :rules="rules" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="项目名称" prop="name">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="项目区域" prop="region">
                <el-input v-model="form.region"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="开始时间" prop="beginTime">
                <el-date-picker v-model="form.beginTime" value-format="timestamp" type="date" placeholder="选择日期" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结束时间" prop="endTime">
                <el-date-picker v-model="form.endTime" value-format="timestamp" type="date" placeholder="选择日期" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="项目简介" prop="introduce">
            <el-input type="textarea" v-model="form.introduce"></el-input>
          </el-form-item>
          <el-form-item label="宣传图" prop="figure">
            <el-upload
              class="upload-demo"
              list-type="picture-card"
              action="http://121.199.29.84:8001/file/upload"
              :on-success="uploadSuccessHandler"
              :limit="1"
              :file-list="fileList">
              <i class="el-icon-plus"></i>
              <div slot="tip" class="el-upload__tip">文件大小不允许超过3M</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="项目详情" prop="details">
            <tinymce ref="content" v-model="form.details" :height="240" />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="visible = false">取消</el-button>
        <el-button size="small" type="primary" @click="submitHandler">确定</el-button>
      </span>
    </el-dialog>
    <!-- 模态框 -->
    <!-- 项目详情 -->
    <el-dialog title="研学项目" :visible.sync="visible_project" width="80%" class="customer_modal">
      <div v-html="project.details"> </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="visible_project = false">关闭</el-button>
      </span>
    </el-dialog>
    <!-- /项目详情 -->
  </div>
</template>
<script>
import {get,post} from '@/utils/request'
import _ from 'lodash'
import {mapGetters} from 'vuex'
import Tinymce from '@/components/Tinymce'
export default {
  data(){
    return {
      project:{},
      options:[
        '审核中',
        '审核通过',
        '审核不通过',
        '报名中',
        '报名结束'
      ],
      visible:false,
      visible_project:false,
      loading:false,
      title:"新增研学项目信息",
      param:{
        page:1,
        pageSize:15
      },
      projectData:{
        list:[]
      },
      fileList:[],
      form:{},
      rules:{
        name: [ { required: true, message: '请输入名称', trigger: 'blur' } ],
        introduce: [ { required: true, message: '请输入简介', trigger: 'blur' } ],
        region:[{ required: true, message: '请输入区域', trigger: 'blur' }],
        beginTime:[{ required: true, message: '请选择开始时间', trigger: 'blur' }],
        endTime:[{ required: true, message: '请选择结束时间', trigger: 'blur' }],
      }
    }
  },
  computed:{
    ...mapGetters(['user'])
  },
  created(){
    this.loadProjects();
  },
  components: { Tinymce },
  methods:{
    toDetails(row){
      this.project = row;
      this.visible_project = true;
    },
    submitHandler(){
      this.form.userId = this.user.id;
      this.$refs['projectForm'].validate((valid) => {
        if (valid) {
          let url = '/project/saveOrUpdate'
          post(url,this.form).then(response => {
            this.$message({type:"success",message:response.message})
            this.loadProjects();
            this.visible = false;
          })
        } else {
          return false;
        }
      });
    },
    // 去保存
    toSaveHandler(){
      this.title = "新增研学项目信息";
      this.form = {};
      this.fileList = [];
      this.visible = true;
      this.$refs.content.setContent("");
    },
    // 去修改
    toEditHandler(row){
      this.title = "修改研学项目信息"
      this.form = _.clone(row);
      this.visible = true;
    },
    // 去删除
    toDeleteHandler(row){
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = '/project/delete'
        get(url,{id:row.id}).then(response =>{
          this.$message({ type: 'success', message: '删除成功!' });
          this.loadProjects();
        })
      })
    },
    // 查询
    loadProjects(){
      this.loading = true;
      let url = "/project/pageQuery"
      this.param.userId = this.user.id;   //导师信息
      get(url,this.param).then(response => {
        this.projectData = response.data;
        this.loading = false;
      })
    },
    // 当前页发生改变
    currentChangeHandler(page){
      this.param.page = page;
      this.loadProjects();
    },
    // 重置表单校验
    clearValidate() {
      this.$refs['projectForm'].resetFields();
    },
    //根据地区查询项目
    inputChange(){
      this.loadProjects()
    },
    // 上传成功
    uploadSuccessHandler(response){
      if(response.status == 200){
        this.$set(this.form,'figure','http://121.199.29.84:8888/group1/'+response.data.id);
      } else {
        this.$message({type:'error',message:'附件服务器异常！'})
        this.visible = false;
      }
    },
  }
}
</script>
